<div>
<ol class="breadcrumb" >
    <li> <i class="fa fa-anchor"></i>统计管理</li>
    <li>全市统计</li>
    <li style="float: right"><a  href="javascript:history.go(-1);">返回</a></li>
</ol>

<div class="panel">
    <div class="indexTitle"><i class="fa fa-list">&nbsp;&nbsp;</i>电桩运营总览 　　　　总计&nbsp;&nbsp;<i class="fa fa-map-marker">&nbsp;{$area}</i></div>
    <div class="panel-body search-panel-body">
        <div class="col-xs-5" style=" width:200px;">
            <div class="input-group">
                <span class="input-group-addon" style="width:80px;">所在区县</span>
                <select id="location" name="location" class="form-control" style="width:200px;">
                    <option value="0">--</option>
                    <volist name="china" id="vo">
                        <option value="{$vo.code}" class="{$vo.pcode}">{$vo.name}</option>
                    </volist>
                </select>
            </div>
        </div>
    </div>
</div>
<table  class="table table-bordered table-striped table-mcit" >
    <thead>
    <tr>
        <th >
            <button class='btn btn-block btn-mcit' >ID</button>
        </th>
        <th>
            <button class='btn btn-block btn-mcit' >站点名称</button>
        </th>
        <th>
            <button class='btn btn-block btn-mcit' >所在区域</button>
        </th>
        <th>
            <button class='btn btn-block btn-mcit' >运营二维码</button>
        </th>
        <th>
            <button class='btn btn-block btn-mcit' >设备地址</button>
        </th>
        <th>
            <button class='btn btn-block btn-mcit' >安装时间</button>
        </th>
    </tr>
    </thead>
    <tbody id="DataTableContent">
    <empty name="char">
        <td colspan="99" style="text-align:center" class="danger"> <strong style="color: red"><i class="fa fa-meh-o"></i>
            &nbsp;&nbsp;当前条件下没有数据</strong>
        </td>
        <else />
        <volist name="char" id="data">
            <tr>
                <td>{$data.id}</td>
                <td title="{$data.name}">{$data.name_text}</td>
                <td>{$data.location}</td>
                <td>{$data.evc_number}</td>
                <td>{$data.key_link}</td>
                <td>{$data.sys_creat_time}</td>
            </tr>
        </volist>
    </empty>
    <tr>
        <td colspan="99" style="text-align:center">
            <ul class="pagination">{$pageView}</ul>
        </td>
    </tr>
    </tbody>
</table>
</div>
<script>
    $(document).ready(function () {

        $("#location").change(function(){
            var code = $(this).val();
            var district = $(this).children('option:selected').attr("class");
            //alert(code);
            $.ajax({
                type:"post",
                url:'__URL__/char_area',
                data: {code:code,district:district},
                dataType: "json",
                success:function(data){
                    //alert(data);
                    $("#DataTableContent").html(data.html);
                }
            });
        });
    })
</script>